<!--学生主页-->
<template>
  <div class="main-page">
    <!-- 左侧内容区域 -->
    <div class="left-content">
      <!-- 公告列表 -->
      <div class="announcement-list">
        <div class="announcement-card" v-for="announcement in announcements" :key="announcement.id" @click="viewMessageDetail(announcement)">
          <span class="announcement-title">{{ announcement.title }}</span>
          <span class="announcement-content">{{ announcement.content }}</span>
        </div>
      </div>
    </div>
    <div class="divider"></div>
    <!-- 右侧内容区域 -->
    <div class="right-content">
      <!-- 任务表格 -->
      <el-table 
        :data="filteredTasks" 
        :header-cell-style="{
          color: '#ffffff',
          background: '#6f7f93',
        }"
        style="width: 100%;"
        height="500">
        <el-table-column prop="name" label="任务名" width="200"></el-table-column>
        <el-table-column prop="project" label="所属项目" width="200"></el-table-column>
        <el-table-column prop="remainingTime" label="剩余时间"></el-table-column>
      </el-table>
      <!-- 项目按钮 -->
      <div class="project-buttons">
        <el-button @click="showAllTasks">全部</el-button>
        <el-button
          v-for="project in projects"
          :key="project"
          @click="filterTasksByProject(project)"
        >
          {{ project }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { ElTable, ElTableColumn, ElButton } from 'element-plus'

const router = useRouter()

const tasks = ref([
  { id: 1, name: '任务一', project: '项目A', remainingTime: '2天' },
  { id: 2, name: '任务二', project: '项目B', remainingTime: '5天' },
  { id: 3, name: '任务三', project: '项目A', remainingTime: '1天' },
  { id: 4, name: '任务四', project: '项目C', remainingTime: '3天' },
  { id: 5, name: '任务五', project: '项目C', remainingTime: '3天' },
  { id: 6, name: '任务六', project: '项目C', remainingTime: '3天' },
  { id: 7, name: '任务七', project: '项目C', remainingTime: '3天' },
  { id: 8, name: '任务八', project: '项目B', remainingTime: '5天' },
  { id: 9, name: '任务九', project: '项目B', remainingTime: '5天' },
  { id: 10, name: '任务十', project: '项目B', remainingTime: '5天' },
  { id: 11, name: '任务二', project: '项目B', remainingTime: '5天' },
  { id: 12, name: '任务一', project: '项目A', remainingTime: '2天' },
  { id: 13, name: '任务一', project: '项目A', remainingTime: '2天' },
  { id: 14, name: '任务一', project: '项目A', remainingTime: '2天' },
  // 更多任务...
])

const projects = ref(['项目A', '项目B', '项目C'])

const filteredTasks = ref([...tasks.value])

const filterTasksByProject = (project) => {
  filteredTasks.value = tasks.value.filter(task => task.project === project)
}

const showAllTasks = () => {
  filteredTasks.value = [...tasks.value]
}

// 公告数据
const announcements = ref([
  { id: 1, title: '公告一', content: '这是公告一的内容，展示在这里。' },
  { id: 2, title: '公告二', content: '这是公告二的内容，展示在这里。' },
  { id: 3, title: '公告三', content: '这是公告三的内容，展示在这里。' },
  // 更多公告...
])

const viewMessageDetail = (announcement) => {
    router.push({ name: 'message-detail', query: { message: JSON.stringify(announcement) } })
  }

</script>

<style>
.main-page {
  display: flex;
  height: 100%;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

.left-content {
  width: 50%;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
  margin-right: 10px; /* 增加右边距 */
}

.divider {
  width: 1px;
  background-color: #ddd;
  margin: 0 10px;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.announcement-card {
  background: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ddd; /* 添加边框使其更明显 */
  border-left: 4px solid #6f7f93; /* 侧边条颜色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.announcement-title {
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left; /* 文字左对齐 */
}

.announcement-content {
  color: #666;
  text-align: left; /* 文字左对齐 */
}

.right-content {
  width: 50%;
  padding: 20px;
  background-color: #fff;
  display: flex;
  margin-left: 10px; /* 增加左边距 */
  flex-direction: column;
}

.project-buttons {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
}

.project-buttons .el-button {
  margin-right: 10px;
}
</style>
